<template>
    <view>
        <div class="visit-content">
            <!-- 活动记录跟进 -->
            <view class="activ-item" v-for="(item, index) in dataList">
                <view class="active-info">
                    {{item.content}}
                </view>
                <text class="time">{{item.createTime}}</text>
            </view>
            <view class="activ-item" v-for="(item, index) in dataList" v-if="0">
                <view class="user-info">
                    <view class="left">
                        <view class="head-box">
                            in
                        </view>
                        <view class="info">
                            <text class="name">{{item.nickName}}</text>
                            <text class="time">{{item.createTime}}</text>
                        </view>
                    </view>
                    <view class="right">
                        <view class="btn-box">
                            <view class="deal-btn un-deal">
                                {{utils.getDictLabelName("customerVisitType",item.visitType)}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="active-info">
                    {{item.content}}{{item.nickName}}
                </view>
                <view class="active-img" @tap="previewImage(item.photos)">
                    <image v-if="item.photos!=null" v-for="(photo, index) in utils.photosToArr(item.photos)" class="img"
                        :src="baseUrl+photo" mode="aspectFill"></image>

                </view>
                <view class="address">
                    {{item.address}}
                </view>
                <view class="follow-time">
                    <image class="img" src="../../static/images/icon_head.png" mode="aspectFill"></image>
                    <text class="text">下次跟进时间：{{item.nextTime}}</text>
                </view>
            </view>


            <!-- 写跟进 -->
            <view class="pub-add-box" @click="addFollow" v-if="customerUserId!=undefined&&status==1">
                <image class="img" src="../../static/images/icon_pen.png" mode="aspectFill"></image>
                <text class="text">写跟进</text>
            </view>
        </div>
        <view class="is-more" @click="loadMore()" v-if="isMore">加载更多</view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {

        data() {
            return {
                isMore: true,
                baseUrl: uni.getStorageSync('requestPath'),
                status: 0,
                customerUserId: undefined,
                customerId: undefined,
                page: {
                    num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10 // 每页数据的数量,默认10
                },
                dataList: [],
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
            this.getCustomerVisitList(this.page);
        },
        methods: {
            // mescroll组件初始化的回调,可获取到mescroll对象
            // mescrollInit(mescroll) {
            // 	this.mescroll = mescroll;
            // },
            // /*下拉刷新的回调 */
            // downCallback(mescroll) {
            // 	this.mescroll.resetUpScroll()
            // },
            // /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            // upCallback(page) {
            // 	this.getCustomerVisitList(page);
            // },
            getCustomerVisitList(page) {
                var data = { page: page.num, customerId: this.customerId };
                var that = this;

                api.getCustomerVisitList(data).then(
                    res => {
                        if (res.code == 200) {
                            //设置列表数据
                            if (page.num == 1) {
                                that.dataList = res.data.list;

                            } else {
                                that.dataList = that.dataList.concat(res.data.list);

                            }
                            that.isMore = res.data.hasNextPage;
                            that.$parent.updateVisitCount(res.data.total);
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                            that.dataList = null;
                            mescroll.endErr();
                            // that.mescroll.endSuccess(0);
                        }
                    },
                    rej => {}
                );
            },
            getCustomerVisit(customerId, customerUserId, status) {
                this.customerId = customerId;
                this.customerUserId = customerUserId;
                this.status = status;
                this.page.num = 1;
                this.getCustomerVisitList(this.page);
            },
            loadMore() {
                this.page.num++;
                this.getCustomerVisitList(this.page);
            },
            // 写跟进
            addFollow() {
                uni.navigateTo({
                    url: './addFollow/index?customerId=' + this.customerId + "&customerUserId=" + this
                        .customerUserId
                })
            },
            previewImage(photos) {
                var photosArr = photos.split(",");
                var imgArr = [];
                photosArr.forEach(function(element) {
                    imgArr.push(uni.getStorageSync('requestPath') + element);
                });
                //预览图片
                uni.previewImage({
                    urls: imgArr,
                    current: imgArr[0]
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .visit-content {
        position: relative;
        background: #fff;
        padding: 0 30upx;

        .activ-item {
            border-bottom: 1px solid #f7f7f7;
            padding: 20upx 0;

            &:last-child {
                border-bottom: none;
            }

            .user-info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 30upx 0;

                .left {
                    display: flex;
                    align-items: center;

                    .head-box {
                        width: 90upx;
                        height: 90upx;
                        line-height: 90upx;
                        border-radius: 50%;
                        background: #0aAC44;
                        font-size: 28upx;
                        color: #fff;
                        text-align: center;
                        margin-right: 20upx;
                    }

                    .info {
                        height: 90upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .name {
                            font-size: 28upx;
                            color: #000;
                        }

                        .time {
                            font-size: 28upx;
                            color: #999;
                        }
                    }
                }

                .right {
                    .btn-box {
                        .deal-btn {
                            text-align: center;
                            padding: 10upx 10upx;
                            font-size: 24upx;
                            border-radius: 4upx;

                            &.deal {
                                background: #0aAC44;
                                color: #fff;
                            }

                            &.un-deal {
                                background: #EFEFEF;
                                color: #BDBDBD;
                            }
                        }
                    }
                }
            }

            .active-info {
                display: flex;
                align-items: center;
                font-size: 32upx;
                color: #666;
                margin-bottom: 10rpx;

                .name {
                    font-size: 32upx;
                    color: #2172FF;
                }
            }

            .address {
                font-size: 30upx;
                color: #999;
                display: flex;
                align-items: center;
            }

            .active-img {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 20upx;

                .img {
                    width: 31.33%;
                    height: 200upx;
                    margin-right: 2%;
                    margin-bottom: 20upx;

                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }

            .follow-time {
                display: flex;
                align-items: center;
                margin-top: 20upx;

                .img {
                    width: 30upx;
                    height: 30upx;
                }

                .text {
                    font-size: 30upx;
                    color: #999;
                    margin-left: 20upx;
                }
            }
        }
    }

    .pub-add-box {
        width: 120upx;
        height: 120upx;
        border-radius: 50%;
        background: #0aAC44;
        position: fixed;
        right: 60upx;
        bottom: 60upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 15upx #0AAC44;

        .img {
            width: 30upx;
            height: 30upx;
        }

        .text {
            font-size: 24upx;
            color: #fff;
            margin-top: 10upx;
        }
    }

    .is-more {
        margin: 30upx 0;
        color: #BFBFBF;
        font-size: 16px;
        text-align: center;
    }
</style>